<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar title="首页"  backgroundColor="transparent" :border="false"
				></uni-nav-bar>
				<!-- right-icon="search" @clickRight="search" -->
			<view class="box">

				<view class="swiper-box">
					<u-swiper class="swiper" :list="swiper_list" @click="swiperClick"></u-swiper>
				</view>
				<view class="btn">
					<view class="btn-left">
						<view class="btn-box" @click="goProject">
							<view class="btn-box-text">
								<view class="btn-left-top">
									项目导航
								</view>
								<view class="btn-left-bottom">
									查看项目详情
								</view>
							</view>
						</view>
					</view>
					<view class="btn-right">
						<view class="btn-box" @click="goMyIntegral">
							<view class="btn-box-text">
								<view class="btn-right-top">
									我的积分
								</view>
								<view class="btn-right-bottom">
									我的积分详情
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="notice">
					<xzw-notice :list="noticeList" direction="row" @goMore="goAnnouncement" />
				</view>

				<view class="commodity">
					<view class="commodity-list" v-for="item in goodslist">
						<view class="commodity-img">
							<u--image :src="item.goods_img" :lazyLoad="true" width="280rpx" height="300rpx"></u--image>
						</view>
						<view class="commodity-text">
							<view class="commodity-top">
								<view class="text-title">
									{{ item.goods_name }}
								</view>
								<view class="text-price">
									<view class="goods_price">现价：¥{{ item.goods_price }}</view>
									<view class="original_price">原价：¥{{ item.original_price || 0}}</view>
								</view>
							</view>
							<view class="commodity-bottom">
								<view class="text-progress-bar">
									<u-line-progress :percentage="parseInt(item.sales_initial/item.stock*100)"
										active-color="#F55E0F" inactive-color="#1C0900" height="14rpx"
										:showText="false"></u-line-progress>
								</view>
								<view class="text-btn">
									<view class="go-subscription" @click="goSubscription(item)">
										去购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="authentication" type="center">
			<view class="authentication">
				<view class="close">
					<u-icon name="close" color="#FFFFFF" size="35" @click="authenticationClose"></u-icon>
				</view>
				<view class="authentication-title">
					<view class="authentication-text"></view>
				</view>
				<view class="authentication-box">
					<view class="authentication-box-img">
						<view></view>
					</view>
					<view class="authentication-box-text">
						恭喜您，实名认证成功！
					</view>
					<view class="authentication-box-btn">
						<view @click="authenticationClose">
							知道了
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="idcardpopup" type="center">
			<view class="idcard-popup">
				<view class="idcard-log"></view>
				<view class="close">
					<u-icon name="close" color="#FFFFFF" size="35" @click="idcardClose"></u-icon>
				</view>
				<view class="idcard-popup-title">
					<view class="idcard-text"></view>
				</view>
				<view class="idcard-popup-box">
					<view class="idcard-popup-box-text">
						您好，每个账号仅可实名一个身份证号。建议您先实名认证再购买
					</view>
					<view class="idcard-popup-box-btn">
						<view @click="goIdcard">
							好的，去认证
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="close">
					<u-icon name="close" color="#FFFFFF" size="35" @click="close"></u-icon>
				</view>
				<view class="popup-top-right"
					:class="{'voided': subscriptionType == 'voided', 'successful': subscriptionType == 'successful', 'failure': subscriptionType == 'failure'}">
				</view>
				<view class="popup-box" v-if="subscriptionType == 'successful'">
					<view class="title">
						购买成功
					</view>
					<view class="text">
						恭喜您，成功购买 {{goods.goods_name}}
					</view>
					<view class="btn">
						<view class="btn-text-ok" @click="goPay(goods)">
							去支付
						</view>
					</view>
				</view>

				<view class="popup-box" v-else-if="subscriptionType == 'failure'">
					<view class="title">
						<!-- 购买失败 -->
						{{msg}}
					</view>
					<view class="text">
						很抱歉，本次购买 {{goods.goods_name}} 失败！
					</view>
					<view class="btn">
						<view class="btn-text-ok" @click="againSubscription(goods)">
							再次购买
						</view>
					</view>
				</view>

				<view class="popup-box" v-else-if="subscriptionType == 'voided'">
					<view class="title">
						购买作废
					</view>
					<view class="text">
						很抱歉，本轮购买已结束，敬请 期待下次认
					</view>
					<view class="btn">
						<view class="btn-text-failure" @click="close">
							知道了
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import xzwNotice from '@/uni_modules/xzw-notice/components/xzw-notice/xzw-notice.vue'
	let timer = null
	export default {
		data() {
			return {
				bannerList: [],
				swiper_list: [],
				noticeList: [{
					"id": 1,
					"title": "景区深林防火人人有责",
				}],
				show: true,
				subscriptionType: 'failure',
				goodslist: [],
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
				goods: {},
				msg: '',
				order_id: '',
				isClick: true
			}
		},
		onReachBottom() {
			this.getGoods()
			this.getBanner()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		onLoad() {
			this.getBanner()
			this.getGoods()
			this.getNoticeList()
		},
		onShow() {
			// this.$store.commit('user/getReal')
		},
		methods: {
			swiperClick(index) {
				console.log(index);
			},
			getBanner() {
				let params = {
					type :1
				}
				this.$api.banner(params).then(res => {
					console.log(res.data)
					this.bannerList = res.data.list
					this.swiper_list = res.data.list.map(item => item.img_url)
				})
			},
			// 打开购买弹窗
			open() {
				this.$refs.popup.open('center')
			},
			// 打开实名认证弹窗
			openIdcard() {
				this.$refs.idcardpopup.open('center')
			},
			// 打开实名认证成功弹窗
			openAuthentication() {
				this.$refs.authentication.open('center')
			},
			// 关闭购买弹窗
			close() {
				this.$refs.popup.close()
			},
			// 关闭实名认证弹窗
			idcardClose() {
				this.$refs.idcardpopup.close()
			},
			// 关闭实名认证成功弹窗
			authenticationClose() {
				this.$refs.authentication.close()
			},
			// 跳转实名认证页面
			goIdcard() {
				uni.navigateTo({
					url: "/pages/person/my/realName?page='index'"
				})
				this.idcardClose()
			},
			// 购买按钮
			goSubscription(e) {
				if(this.isClick){
					this.isClick = false
					setTimeout(()=>{
						this.isClick = true
					},1500)
					
					this.goods = {}
					this.$api.orderCreate({
						goods_id: e.goods_id
					}).then(res => {
						console.log(res)
						this.msg = res.msg
						if (res.data.type == 1){
							this.subscriptionType = 'successful'
							this.goods = e
							this.order_id = res.data.info.order_id
						} else if(res.data.type == 2){
							this.subscriptionType = 'failure'
						} else if(res.data.type == 3){
							this.subscriptionType = 'voided'
						}
						this.open()
					}).catch(err=>{
						console.log('err',err)
					})
					// if (this.$store.state.user.isRealName) {
					// 	this.openIdcard()
					// } else {
						
					// }
				}
				
			},
			// 再次购买
			againSubscription(e) {
				this.close()
				timer = setTimeout(() => {
					this.goSubscription(e)
					if (timer) {
						clearTimeout(timer);
						timer = null;
					}
				}, 1000);
			},
			// 跳转地图页
			goMapList() {
				uni.navigateTo({
					url: '/pages/index/map/maplist'
				})
			},
			// 获取商品列表
			getGoods() {
				if (this.goodslist.length == this.total) return
				this.$api.goods(this.paging).then(res => {
					console.log(res.data)
					this.goodslist = [...this.goodslist, ...res.data.list]
					this.total = res.data.total
					this.paging.page++
				})
			},
			// 跳转支付页面
			goPay(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/index/pay/pay?order_id=' + this.order_id + '&obj=' + JSON.stringify(e),
					complete: () => this.close()
				})
			},
			getNoticeList() {
				this.$api.noticeList({
					page: 1,
					limit: 100,
					type:1
				}).then(res => {
					this.noticeList = res.data.list
				})
			},
			// 刷新列表
			refresh() {
				this.paging.page = 1
				this.total = null
				this.goodslist = []
				this.getGoods()
			},
			goProject() {
				uni.navigateTo({
					url: '/pages/index/project/project'
				})
			},
			goAnnouncement() {
				uni.navigateTo({
					url: '/pages/index/announcement/announcement'
				})
			},
			goMyIntegral() {
				uni.navigateTo({
					url: '/pages/index/myintegral/myintegral'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 80rpx
	}

	.content {
		background: url('@/static/img/bg.png');
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
			padding-bottom: 30rpx;
		}

		.swiper-box {
			.swiper {
				height: 276rpx;
			}
		}

		.btn {
			padding-top: 16rpx;
			display: flex;

			.btn-left,
			.btn-right {
				height: 140rpx;
				flex: 1;

				.btn-box {
					height: 140rpx;
					border-radius: 20rpx;
				}
			}

			.btn-left {
				padding-right: 8rpx;

				.btn-box {
					background: url('@/static/img/btn_left.png') no-repeat;
					background-size: 100% 100%;

					.btn-box-text {
						padding: 30rpx 34rpx;

						.btn-left-top {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
						}

						.btn-left-bottom {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}

			.btn-right {
				padding-left: 8rpx;

				.btn-box {
					background: url('@/static/img/btn_right.png') repeat;
					background-size: 100% 100%;

					.btn-box-text {
						padding: 30rpx;

						.btn-right-top {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							text-align: right;
							font-style: normal;
						}

						.btn-right-bottom {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: right;
							font-style: normal;
						}
					}
				}
			}
		}

		.notice {
			padding-top: 15rpx;
			padding-bottom: 16rpx;

			.notice-bar {
				border-radius: 20rpx !important;
				height: 74rpx;
			}
		}

		.commodity {
			border-radius: 20rpx;
			padding: 26rpx;
			background-color: white;

			.commodity-list {
				padding: 16rpx 0;
				display: flex;
				margin: 0 0 20rpx;
				.commodity-img {
					width: 288rpx;
				}

				.commodity-text {
					flex: 1;
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.commodity-top {
						height: 142rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}

					.commodity-bottom {
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.text-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #111111;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}

					.text-price {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #D06122;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods_price{
						}
						.original_price{
							color: #999999;
							// text-decoration: line-through;
						}
					}

					.text-progress-bar {}

					.text-btn {
						height: 64rpx;

						.go-subscription {
							height: 64rpx;
							background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
							border-radius: 16rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
							font-style: normal;
						}
					}
				}
			}
		}
	}

	.popup {
		width: 570rpx;
		height: 560rpx;
		border-radius: 20rpx;
		position: relative;
		background: url('@/static/img/popup_bg.png') no-repeat;
		background-size: 100% 100%;

		.close {
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translate(-50%);
			width: 90rpx;
			height: 90rpx;
			border: 7rpx solid #FFFFFF;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup-top-right {
			position: absolute;
			top: 22rpx;
			right: 28rpx;
			width: 190rpx;
			height: 168rpx;
		}

		.voided {
			background: url('@/static/img/voided.png') no-repeat;
			background-size: 100% 100%;
		}

		.successful {
			background: url('@/static/img/successful.png') no-repeat;
			background-size: 100% 100%;
		}

		.failure {
			background: url('@/static/img/failure.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.popup-box {
		padding: 0 60rpx;
		padding-top: 140rpx;

		.title {
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 800;
			font-size: 42rpx;
			color: #111111;
			line-height: 50rpx;
			font-style: normal;
		}

		.text {
			padding-top: 58rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #999999;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-indent: 2em;
		}

		.btn {
			display: flex;
			justify-content: center;
			padding-top: 84rpx;

			.btn-text-ok {
				width: 360rpx;
				height: 84rpx;
				background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;
			}

			.btn-text-failure {
				width: 360rpx;
				height: 84rpx;
				background: #A3A3A3;
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}

	.idcard-popup {
		width: 570rpx;
		height: 596rpx;
		background: linear-gradient(270deg, #FFFFFF 0%, #F2D8AE 100%);
		position: relative;
		border-radius: 40rpx;

		.idcard-log {
			width: 144rpx;
			height: 150rpx;
			position: absolute;
			top: 30rpx;
			right: 26rpx;
			background: url('@/static/img/idcard_log.png');
			background-size: 100% 100%;
		}

		.close {
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translate(-50%);
			width: 90rpx;
			height: 90rpx;
			border: 7rpx solid #FFFFFF;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.idcard-popup-title {
			height: 76rpx;
			padding: 44rpx 0 0 52rpx;

			.idcard-text {
				width: 190rpx;
				height: 40rpx;
				background: url('@/static/img/idcard_text.png');
				background-size: 100% 100%;
			}
		}

		.idcard-popup-box {
			height: 476rpx;
			background: url('@/static/img/popup_bg.png');
			background-size: 100% 100%;
			border-radius: 40rpx;

			.idcard-popup-box-text {
				padding: 148rpx 28rpx 104rpx 66rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-indent: 2em;
			}

			.idcard-popup-box-btn {
				display: flex;
				justify-content: center;

				view {
					width: 360rpx;
					height: 84rpx;
					background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 84rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}
	}

	.authentication {
		width: 570rpx;
		height: 596rpx;
		background: linear-gradient(270deg, #FFFFFF 0%, #F2D8AE 100%);
		position: relative;
		border-radius: 40rpx;

		.close {
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translate(-50%);
			width: 90rpx;
			height: 90rpx;
			border: 7rpx solid #FFFFFF;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.authentication-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 120rpx;

			.authentication-text {
				width: 190rpx;
				height: 40rpx;
				background: url('@/static/img/authentication_oko.png');
				background-size: 100% 100%;
			}
		}

		.authentication-box {
			height: 476rpx;
			background: url('@/static/img/popup_bg.png');
			background-size: 100% 100%;
			border-radius: 40rpx;

			.authentication-box-img {
				padding: 56rpx 0 44rpx 0;
				display: flex;
				justify-content: center;

				view {
					width: 150rpx;
					height: 152rpx;
					background: url('@/static/img/authentication_ok.png');
					background-size: 100% 100%;
				}
			}

			.authentication-box-text {
				padding-bottom: 80rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.authentication-box-btn {
			display: flex;
			justify-content: center;

			view {
				width: 360rpx;
				height: 84rpx;
				background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
</style>